<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>疫苗预约系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .custom-img {
            width: 80px;
            height: 80px;
        }
        /* 引入柔和色调 */
        body {
            background-color: #f7f9fc;
            font-family: 'Roboto', sans-serif;
        }

        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 2rem;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        /* 按钮样式 */
        .btn {
            transition: all 0.3s ease;
        }

        .btn:hover {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 输入框聚焦效果 */
        .form-control:focus {
            border-color: #007bff;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 123, 255, 0.1);
        }

        /* 加载动画示例 */
        .spinner-border {
            display: inline-block;
            width: 2rem;
            height: 2rem;
            vertical-align: text-bottom;
            border: 0.25em solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: spinner-border 0.75s linear infinite;
            visibility: hidden;
        }

        @keyframes spinner-border {
            to { transform: rotate(360deg); }
        }

        /* 显示加载动画 */
        #formContainer.loading,
        #appointmentList.loading {
            position: relative;
        }
        #formContainer.loading::after,
        #appointmentList.loading::after {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            visibility: visible;
        }
        @media (max-width: 767.98px) {
            .form-control {
                margin-bottom: 1rem;
            }
        }
        /* 调整表单布局 */
        .form-group {
            margin-bottom: 1rem;
        }
        /* 加载动画控制 */
        .loading::after {
            visibility: visible;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .loading.active::after {
            opacity: 1;
        }

    </style>
</head>
<body>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6 d-flex align-items-center">
            <div class="d-flex flex-row w-100">
                <button id="appointmentBtn" class="btn btn-primary me-2">预约按钮</button>
                <input type="text" id="babyIdInput" class="form-control" placeholder="请输入婴儿身份证号">
                <button id="viewAppointmentBtn" class="btn btn-secondary ms-2">查看预约信息按钮</button>
            </div>
        </div>
    </div>


    <div id="formContainer" class="mt-3" style="display: none;">
        <form id="appointmentForm">
            <div class="mb-3">
                <label for="parentPhone" class="form-label">家长电话号</label>
                <input type="text" class="form-control" id="parentPhone" name="pphone">
            </div>
            <div class="mb-3">
                <label for="babyId" class="form-label">婴儿身份证号</label>
                <input type="text" class="form-control" id="babyId" name="idcard">
            </div>
            <div class="mb-3">
                <label for="babyName" class="form-label">婴儿姓名</label>
                <input type="text" class="form-control" id="babyName" name="uname">
            </div>
            <div class="mb-3">
                <label for="babyGender" class="form-label">婴儿性别</label>
                <input type="text" class="form-control" id="babyGender" name="sex">
            </div>
            <div class="mb-3">
                <label for="babyBirthDate" class="form-label">婴儿出生日期</label>
                <input type="date" class="form-control" id="babyBirthDate" name="borth">
            </div>
            <div class="mb-3">
                <label for="babyCommunity" class="form-label">婴儿所属社区</label>
                <input type="text" class="form-control" id="babyCommunity" name="belong">
            </div>
            <div class="mb-3">
                <label for="vaccineName" class="form-label">预约疫苗名称</label>
                <select class="form-select" id="vaccineName" name="vaccine">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="新冠疫苗">新冠疫苗</option>
                    <option value="F">F</option>
                </select>
            </div>
            <div class="mb-3" id="imageContainer" style="display: none;">
                <img src="/web/image/1.jpg" class="custom-img" alt="疫苗图片">
            </div>
            <div class="mb-3">
                <label for="appointmentTime" class="form-label">预约时间</label>
                <input type="date" class="form-control" id="appointmentTime" name="date">
            </div>
            <button type="submit" id="submitBtn" style="display: none;" class="btn btn-success">提交</button>
        </form>
    </div>
    <div id="appointmentList" class="mt-3" style="display: none;">
        <ul id="appointmentItems" class="list-group"></ul>
    </div>
</div>

<script>
    document.getElementById('appointmentBtn').addEventListener('click', function() {
        document.getElementById('formContainer').style.display = 'block';
    });

    document.getElementById('viewAppointmentBtn').addEventListener('click', function() {
        const babyId = document.getElementById('babyIdInput').value; // 获取同div中的input值
        fetch('./selectQueue?idcard=' + encodeURIComponent(babyId)) // 将获取的值作为查询参数传递
            .then(response => response.json())
            .then(data => {
                console.log(data);
                const list = document.getElementById('appointmentItems');
                list.innerHTML = ''; // 清空现有列表项
                data.forEach(item => { // 假设返回的是数组，遍历并创建li元素
                    const li = document.createElement('li');
                    li.className = 'list-group-item';
                    li.textContent = `接种状态: ${item.state}, 身份证号: ${item.idcard}, 预约时间: ${item.data}, 疫苗名称: ${item.room}`;
                    list.appendChild(li);
                });
                document.getElementById('appointmentList').style.display = 'block';
            });
    });

    document.getElementById('vaccineName').addEventListener('change', function() {
        const selectedValue = this.value;
        const imageContainer = document.getElementById('imageContainer');
        const submitBtn = document.getElementById('submitBtn');
        if (['D', '新冠疫苗', 'F'].includes(selectedValue)) {
            imageContainer.style.display = 'block';
            setTimeout(() => {
                submitBtn.style.display = 'block';
            }, 3000);
        } else {
            imageContainer.style.display = 'none';
            submitBtn.style.display = 'block';
        }
    });

    document.getElementById('appointmentForm').addEventListener('submit', function(event) {
        event.preventDefault();
        let pphone = document.getElementById('parentPhone').value;
        let idcard = document.getElementById('babyId').value;
        let uname = document.getElementById('babyName').value;
        let sex = document.getElementById('babyGender').value;
        let borth = document.getElementById('babyBirthDate').value;
        let belong = document.getElementById('babyCommunity').value;
        let vaccine = document.getElementById('vaccineName').value;
        let date = document.getElementById('appointmentTime').value;
        fetch('./booking?pphone=' + pphone + '&idcard=' + idcard + '&uname=' + uname + '&sex=' + sex + '&borth=' + borth + '&belong=' + belong + '&vaccine=' + vaccine + '&date=' + date, {
            method: 'POST',
        })
            .then(response => response.text())
            .then(data => {
                console.log(data)
                alert(data);
                this.reset();
                document.getElementById('formContainer').style.display = 'none';
            });
    });
    function showLoading(element) {
        element.classList.add('active');
    }
    function hideLoading(element) {
        element.classList.remove('active');
    }

</script>
</body>
</html>
